<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>gmri dev status</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
</head>

<body>
<div class="container">
    <div class="page-header">
        <h1>Gmri dev test page</h1>
    </div>
    <div class="well well-sm">
        <h5>online status <span class="label label-primary" id="status">New</span></h5>
    </div>
    <div class="well well-sm">
        <h5>pay order</h5>
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default" onclick="payOrderClick(1)">1</button>
            <button type="button" class="btn btn-default" onclick="payOrderClick(2)">2</button>
            <button type="button" class="btn btn-default" onclick="payOrderClick(3)">3</button>
            <button type="button" class="btn btn-default" onclick="payOrderClick(4)">4</button>
            <button type="button" class="btn btn-default" onclick="payOrderClick(5)">5</button>
            <button type="button" class="btn btn-default" onclick="payOrderClick(6)">6</button>
            <button type="button" class="btn btn-default" onclick="payOrderClick(7)">7</button>
            <button type="button" class="btn btn-default" onclick="payOrderClick(8)">8</button>
        </div>

        <div style="border:1px solid #e3e3e3;margin-top: 10px;margin-bottom: 10px;padding: 5px">
            <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <label class="checkbox-inline">
                        <input type="checkbox" name="order" value="1">1
                    </label>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <label class="checkbox-inline">
                        <input type="checkbox" name="order" value="2">2
                    </label>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <label class="checkbox-inline">
                        <input type="checkbox" name="order" value="3">3
                    </label>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <label class="checkbox-inline">
                        <input type="checkbox" name="order" value="4">4
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <label class="checkbox-inline">
                        <input type="checkbox"  name="order" value="5">5
                    </label>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <label class="checkbox-inline">
                        <input type="checkbox"  name="order" value="6">6
                    </label>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <label class="checkbox-inline">
                        <input type="checkbox"  name="order" value="7">7
                    </label>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <label class="checkbox-inline">
                        <input type="checkbox" name="order" value="8">8
                    </label>
                </div>
            </div>
            <div>
                <button type="button" class="btn btn-primary" onclick="payClick()" style="margin-top: 20px">pay</button>
            </div>
        </div>
        <button type="button" class="btn btn-primary" onclick="payOrderClick(0)" style="margin-top: 20px">resetOrder</button>
    </div>
    <div class="jumbotron">
        <h5>Order List</h5>
        <table  id="table"></table>
    </div>

    <div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Tips</h4>
                </div>
                <div class="modal-body">
                    <p id="modalText">pay order success&hellip;</p>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- /container -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script type="text/javascript">



    $.post('/dev/status/info',{},
            function (data) {
                $('#status').text(data.online);
                console.log(data.list);

                $('#table').bootstrapTable({
                    columns: [{
                        field: 'orderNumber',
                        title: 'order NO.'
                    }, {
                        field: 'tableNumber',
                        title: 'table NO.'
                    }, {
                        field: 'orderList',
                        title: 'order List'
                    }],
                    data:data.list
                });


            }, "json");
    setInterval(function(){
        $.post('/dev/status/info',{},
                function (data) {
                    $('#status').text(data.online);
                    $('#table').bootstrapTable('load',data.list);

                }, "json");

    },1000);

    function payOrderSuccessModal(str){
        $('#modalText').text(str);
        $("#myModal").modal('show');
        setTimeout(function(){
            $("#myModal").modal('hide');
        },1500)
    }
    function payOrderClick(Num){
        if(Num!=0){
            $.post('/order',{
                order:{
                    orderNumber:'one',
                    tableNumber:'1',
                    orderList:[Num]
                }
            },function(data){
                payOrderSuccessModal('pay order success!!');
                console.log('OK')
            });
        }else{
            $.post('/order/reset',{}, function(data){
                payOrderSuccessModal('pay order reset!!');
                console.log('OK')
            });
        }

    }


    function payClick(){
        var checkVal = [];
        $("input[name='order']:checkbox").each(function(){
            if($(this).is(':checked')){
                console.log('in order ');
                checkVal.push(parseInt($(this).val()));
                $(this).attr("checked",false);
            }
        });

        if(checkVal.length>0){
            $.post('/order',{
                order:{
                    orderNumber:'more',
                    tableNumber:'1',
                    orderList:checkVal
                }
            },function(data){
                payOrderSuccessModal('pay order success!!');
                console.log('OK')
            });
        }
    }
</script>
</body>
</html>
